import React, { useEffect, useState, useRef } from "react"
import { LoadingOutlined } from "@ant-design/icons"
import request from "@/utils/request";
import hcpcmdb from "@/data/hcpcmdb";
import hcpUtils from '@/utils/hcpUtils';

const iframePage = ({type, uuid, uuidName = 'var-resourceUuid', searchParams = []}) => {
  const iframeRef = useRef()
  const [url, setUrl] = useState();
  const [iframeLoading, setIframeLoading] = useState(true);

  const resetIframeStyle = () => {
    let iframe = iframeRef.current;
    let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    if (iframeDoc && iframeDoc.head) {
      let style = iframeDoc.createElement('style');
      style.innerHTML = `
        .page-toolbar > .css-14mr6ll,
        .page-toolbar > nav > :not(h1),
        .page-toolbar > .css-p8muss > button,
        .page-toolbar > .css-umstnt,
        .css-zanmp0,
        .css-1opalb8,
        .css-y8a1hp,
        .css-13883cc,
        .css-siafmh-toolbar-button {
            display: none;
        }
        .page-toolbar {
            margin-left: 90px;
        }
        .css-60onds {
            padding-top: 30px;
        }
        @media screen and (max-width: 768px) {
            div.page-toolbar {
                padding-left: 10px;
            }
            .page-toolbar > nav {
                pointer-events: none;
            }
        }
      `;
    
      iframeDoc.head.appendChild(style);
    }
  }

  const queryGrafanaConfig = async ()=> {
    let res = await request({
        ...hcpcmdb.queryOptions,
        params: {
            type: 'grafanaConfig',
        },
    });
    if (res && res.options && res.options.grafanaConfig) {
        const config = res.options.grafanaConfig.find(item => item.optionName == type);
        
        if(config) {
          // const {protocol, hostname} = window.location;
          let url = config.optionCode;
          let connector = url.indexOf('?') > 0 ? '&' : '?';
          url = `${url}${connector}token=${hcpUtils.getToken()}`;
          if(uuid) url = `${url}&${uuidName}=${uuid}`;
          if(searchParams) {
            searchParams.forEach(param => url = `${url}&${param.name}=${param.value}`)
          }
          setUrl(url);
        }
    }
}

useEffect(() => {
  queryGrafanaConfig();
}, [uuid])
  
  return (
    <div style={{ width: "100%", height: "100%", padding: 10 }}>
      <div
        hidden={!iframeLoading}
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <LoadingOutlined style={{ fontSize: 36 }} />
      </div>
      <iframe
        ref={iframeRef}
        onLoad={() => {
          setIframeLoading(false);
          resetIframeStyle();
        }}
        style={
          iframeLoading
            ? { display: "none" }
            : { width: "100%", height: "100%" }
        }
        src={url}
        frameborder="0"
      ></iframe>
    </div>
  )
}

export default iframePage
